<html>
    <head><title>Meebo Notifier Options</title>
        <style>
            body {
                /*display:-webkit-box;*/
                -webkit-box-orient:horizontal;
                -webkit-box-align:center;
                white-space:nowrap;
                overflow: hidden;
                margin: 0;
                padding:0;
                font: menu;
                -webkit-user-select:none;
                cursor:default;
            }
            body>script,
            body>style {
                display:none;
            }

            div.toolstrip-button {
                -webkit-box-orient:horizontal;
                -webkit-box-align:center;
                -webkit-box-sizing:border-box;
                border:7px solid transparent;
                font:menu;
                background:transparent;
                line-height:100%;
                padding:0;

            }
            div.toolstrip-button-100 {
                position:fixed;
                background-color:silver;
                width:100%;
                height:100%;
                opacity: 0.8;
                margin:auto;
            }
            div.toolstrip-button>img {
                display:-webkit-box;
                width:16px;
                margin:-2px 5px -2px -1px;
            }

            div.toolstrip-button>span {
                display:-webkit-box;
                margin-right:1px;
                margin-top:-1px;
            }

            div.toolstrip-button:hover {
                border-width:7px;
                -webkit-border-image:url() 7 round round;
            }

            div.toolstrip-button:active {
                border-width:7px;
                -webkit-border-image:url() 7 round round;
            }
            #msg {
                height:100%;
                width: 100%;
                text-align:center;
                display: table;
                font-size:18px;
                font-weight:bold;
            }
            #msg p {
                display: table-cell;
                vertical-align: middle;
            }
        </style>
        <script type="text/javascript">

            function save_options() {
                var icqid = document.getElementById("icqid").value;
                var icqpassword = document.getElementById("icqpassword").value;
                var csstags = document.getElementById("CSSTags").value;
                var backgroundImage = document.getElementById("backgroundImage").value;
                localStorage["icqid"] = icqid;
                localStorage["icqpassword"] = icqpassword;
                localStorage["csstags"] = csstags;
                localStorage["backgroundImage"] = backgroundImage;

                var status = document.getElementById("status");
                status.style.display = "block";
                setTimeout(function() {
                    status.style.display = "none";
                }, 750);
            }

            function restore_options() {
                var icqid = localStorage["icqid"];

                if (icqid)
                    document.getElementById("icqid").value = icqid;

                var icqpassword = localStorage["icqpassword"];
                if (icqpassword)
                    document.getElementById("icqpassword").value = icqpassword;

                var csstags = localStorage["csstags"];
                if (csstags)
                    document.getElementById("CSSTags").value = localStorage["csstags"];

                var backgroundImage = localStorage["backgroundImage"];
                if (backgroundImage)
                    document.getElementById("backgroundImage").value = localStorage["backgroundImage"];

            }
        </script>
    </head>
    <body onload="restore_options()">
        <div id="status" class="toolstrip-button-100" style="display:none;">
            <div id="msg">
                <p>Options saved.</p>
            </div>
        </div>
        <h1>Meebo Notifier Options</h1>

        <div class="toolstrip-button">
            <h2>Autologin:</h2>
            <span>ICQ UIN</span><input type="text" id="icqid" name="icqid"/>
            <span>ICQ Password</span><input type="password" id="icqpassword" name="icqpassword"/>
        </div>
        <div class="toolstrip-button">
            <h2>Background Image:</h2>
            <input type="text" id="backgroundImage" name="backgroundImage"/>
        </div>
        <div class="toolstrip-button">
            <h2>CSS Tags:</h2>
            <textarea id="CSSTags" cols="100" rows="10"></textarea>
        </div>
        <button onclick="save_options()">Save</button>

    </body>
</html>